class MenuItem extends eui.Component {
	constructor() {
		super();
		this.skinName = 'menuItemSkin';
	}

	private sel: eui.Image;

	labelDisplay: eui.Label;

	override childrenCreated(): void {
		super.childrenCreated();

		this.touchChildren = false;
		this.addEventListener(mouse.MouseEvent.MOUSE_OVER, this.onMouseOver, this);
		this.addEventListener(mouse.MouseEvent.MOUSE_OUT, this.onMouseOut, this);
	}

	onMouseOver(): void {
		this.currentState = 'down';
	}

	onMouseOut(): void {
		this.currentState = 'up';
	}
}

class ContexMenu extends eui.Component {
	constructor() {
		super();
		this.skinName = 'menuSkin';
		this.touchChildren = true;
	}

	group: eui.Group;

	sc: eui.Scroller;

	override childrenCreated(): void {
		super.childrenCreated();
		this.sc.viewport = this.group;
		this.sc.scrollPolicyH = 'off';
	}

	showContexMenu(
		menus: string[],
		callback: (menu: string) => void,
		self: egret.DisplayObject,
		_width: number,
	): void {
		const width = _width || this.width;
		this.width = width;
		for (let i = 0; i < menus.length; i++) {
			// let btn = new eui.Button()
			const btn = new MenuItem();
			btn.width = width;
			btn.labelDisplay.text = menus[i];
			// btn["labelDisplay"].text = menus[i]
			btn.addEventListener(
				'touchTap',
				// eslint-disable-next-line no-loop-func
				(): void => {
					callback.apply(self, [menus[i]]);
					nextFrame(() => {
						MainWindow.ins().contexMenu.clearContexMenu(this);
					}, null);
				},
				null,
			);
			this.group.addChild(btn);
		}
		this.group.height = this.getMenuHeight();
		this.height = this.getMenuHeight();
	}

	setScroll(b: boolean) {
		this.height = this.stage.stageHeight - this.y;
	}

	getMenuHeight(): number {
		return this.group.numChildren * 50;
	}
}
